<%= stylesheet_link_tag 'bootstrap/pagination' %>
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<table id="table"></table>
<script>
    var $table = $('#table');
    $(function () {
        $table.bootstrapTable({
            classes: "table table-bordered table-hover table-striped",
            method: 'post',
            striped: true,
            sortable: false,                //请求方式（*）
            fixedColumns: true,
            fixedNumber: 5,
            paginationPreText: "上一页",         //自定义上一页按钮显示内容
            paginationNextText: "下一页",
            url: "/admin/re_purchase_overviews/data?company=<%=@company%>",
            sidePagination: "server",
            columns: [
                [
                    {
                        title: '集团',
                        field: 'company',
                        valign: 'middle',
                        align: 'center',
                        rowspan: 2
                    },
                    {
                        title: '月份',
                        field: 'report_date',
                        valign: 'middle',
                        align: 'center',
                        rowspan: 2
                    },
                    {
                        title: '付费用户',
                        field: 'purchaser',
                        valign: 'middle',
                        align: 'center',
                        rowspan: 2
                    },
                    {
                        title: '约课人数',
                        align: 'center',
                        colspan: 5
                    }
                ],
                [
                    {
                        title: '第二月',
                        field: 'month_1',
                        align: 'center',
                        formatter: function (value, row) {
                            if (row.purchaser > 0 && value > 0) {
                                return ((value / row.purchaser) * 100).toFixed(2) + "%";
                            } else {
                                return null;
                            }
                        }
                    },
                    {
                        title: '第三月',
                        field: 'month_2',
                        align: 'center',
                        formatter: function (value, row) {
                            if (row.purchaser > 0 && value > 0) {
                                return ((value / row.purchaser) * 100).toFixed(2) + "%";
                            } else {
                                return null;
                            }
                        }
                    },
                    {
                        title: '第四月',
                        field: 'month_3',
                        align: 'center',
                        formatter: function (value, row) {
                            if (row.purchaser > 0 && value > 0) {
                                return ((value / row.purchaser) * 100).toFixed(2) + "%";
                            } else {
                                return null;
                            }
                        }
                    },
                    {
                        title: '第五月',
                        field: 'month_4',
                        align: 'center',
                        formatter: function (value, row) {
                            if (row.purchaser > 0 && value > 0) {
                                return ((value / row.purchaser) * 100).toFixed(2) + "%";
                            } else {
                                return null;
                            }
                        }
                    },
                    {
                        title: '第六月',
                        field: 'month_5',
                        align: 'center',
                        formatter: function (value, row) {
                            if (row.purchaser > 0 && value > 0) {
                                return ((value / row.purchaser) * 100).toFixed(2) + "%";
                            } else {
                                return null;
                            }
                        }
                    }
                ]

            ],
            onLoadSuccess: function (data) {
                var rows = data.rows;
                var company = "";
                var startIndex = 0;
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    if (company === "") {
                        company = row["company"];

                    } else {
                        if (company !== row["company"]) {
                            $table.bootstrapTable('mergeCells', {
                                index: startIndex,
                                field: 'company',
                                rowspan: i - startIndex
                            });
                            startIndex = i;
                            company = row["company"];
                        }
                    }

                }
                $table.bootstrapTable('mergeCells', {
                    index: startIndex,
                    field: 'company',
                    rowspan: rows.length - startIndex
                });
            }
        })
    });
</script>